<template>
  <div class="right">
         <div class="goods" v-for="(v,i) in arr" :key="i" @click="fun(v)">
         <img :src="v.picUrl" alt="">
         <div class="info">
            <div class="text">
                <h3>{{v.name}}</h3>
                <p>{{v.wmPoiScore}}分</p>
                <p>{{v.monthSalesTip}} 好评率100%</p>
            </div>
            <div class="price">
              <span>{{v.averagePriceTip.slice(2)}}</span>
              <span>+</span>
            </div>
         </div>
       </div>
     </div>
</template>

<script>

import {shop_list} from "../utils/apis"
export default {
    data(){
      return{
        arr:[]
      }
    },
    props:["activeKey"],
    mounted(){
      shop_list().then((res)=>{
        this.arr=res.data.list
      })
    },
    methods:{
      fun(v){
        // console.log(v.mtWmPoiId)
        this.$router.push({path:"/shopview",query:{id:Number(v.mtWmPoiId)}})
      }
    }
}
</script>

<style lang="scss" scoped>
.right{
   flex: 1;
    margin-left: 10px;
    >span{
      margin: 5px 0;
      color: #000;
      font-size: 14px;
      font-weight: bold;
    }
   
  }
.goods{
      margin: 0 0 20px 0;
      display: flex;
      >img{
        margin-top: 16px;
        width: 100px;
        height: 100px;
      }
      .info{
       flex: 1;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .text{
          width:178px;
          h3{
            font-size: 16px;
          }
          p{
            line-height: 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow:ellipsis ;
            color: #aaa;
          }
        }
      }
      .price{
        display: flex;
        justify-content: space-between;
        >span:nth-child(1){
          color: #f00;
          font-weight: bold;
        }
        >span:nth-child(2){
          margin-right: 10px;
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 22px;
          font-size: 16px;
          font-weight: bold;
          color: #fff;
          border-radius: 50%;
          background-color: skyblue;
        }
      }
    }
</style>